<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>腾讯视频板块动漫轮番图</title>
    <link rel="stylesheet" href="./swiper-bundle.min.css">
    <script src="./swiper-bundle.min.js"></script>
    <script src="../../三段/五月/jquery/jquery.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    html,
    body {
        position: relative;
        height: 100%;
    }

    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
    }

    .swiper {
        width: 100%;
        height: 100%;
    }

    .swiper-slide {
        width: 700px;
        height: 500px;
        margin-top: 100px;
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .swiper-slide img {
        display: block;
        width: 500px;
        height: 300px;
        object-fit: cover;
    }
    .swiper-button-next {
        position: absolute;
        top: 55px;
        left: 1050px;
    }
    .swiper-button-prev {
        position: absolute;
        top: 55px;
        left: 850px;
    }
    /* .swiper-pagination {
        position: absolute;
        top: 45px;
        left: 950px;
    } */
</style>

<body>

    <!-- Swiper -->
    <div class="swiper mySwiper swiper-initialized swiper-horizontal swiper-pointer-events">
        <div class="swiper-wrapper" id="swiper-wrapper-16374469e2d629a6" aria-live="polite"
            style="transition-duration: 0ms; transform: translate3d(-1948px, 0px, 0px);">

        </div>
        <div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide"
            aria-controls="swiper-wrapper-16374469e2d629a6"></div>
        <div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide"
            aria-controls="swiper-wrapper-16374469e2d629a6"></div>
        <div
            class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal">
            <span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button"
                aria-label="Go to slide 1" aria-current="true"></span><span class="swiper-pagination-bullet"
                tabindex="0" role="button" aria-label="Go to slide 2"></span><span class="swiper-pagination-bullet"
                tabindex="0" role="button" aria-label="Go to slide 3"></span>
        </div>
        <div class="swiper-pagination swiper-pagination-fraction swiper-pagination-horizontal"><span class="swiper-pagination-current">1</span> / <span class="swiper-pagination-total">4</span></div>

        <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
    </div>
     
</body>
<script>
    $.ajax({
        url: 'https://liu.zzgoodqc.cn/banner',
        method: 'GET',
        dataType: 'json',
        success: function (res) {
            console.log(res);
            var str = ''
            for (let i in res.data) {
                str += `<div class="swiper-slide" role="group" aria-label="${+i + 1} / 9" style="width: 1918px;">
                            <img src="${res.data[i].img}" alt=''>
                        </div>`
            }
            swiper.appendSlide(str)
        }
    })
    // var swiper = new Swiper(".mySwiper", {
    //     slidesPerView: 3,
    //     spaceBetween: 30,
    //     slidesPerGroup: 3,
    //     loop: true,
    //     loopFillGroupWithBlank: true,
    //     pagination: {
    //         el: ".swiper-pagination",
    //         clickable: true,
    //     },
    //     navigation: {
    //         nextEl: ".swiper-button-next",
    //         prevEl: ".swiper-button-prev",
    //     },
    // });



    
    var swiper = new Swiper(".mySwiper", {
        slidesPerView: 2,
        slidesPerGroup: 2,
        centeredSlides: true,
        spaceBetween: 30,
        pagination: {
          el: ".swiper-pagination",
          type: "fraction",
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });

      var appendNumber = 6;
      var prependNumber = 1;
      document
        .querySelector(".prepend-2-slides", function (e) {
          e.preventDefault();
          swiper.prependSlide([
            '<div class="swiper-slide">Slide ' + --prependNumber + "</div>",
            '<div class="swiper-slide">Slide ' + --prependNumber + "</div>",
          ]);
        });
      document
        .querySelector(".prepend-slide", function (e) {
          e.preventDefault();
          swiper.prependSlide(
            '<div class="swiper-slide">Slide ' + --prependNumber + "</div>"
          );
        });
      document
        .querySelector(".append-slide", function (e) {
          e.preventDefault();
          swiper.appendSlide(
            '<div class="swiper-slide">Slide ' + ++appendNumber + "</div>"
          );
        });
      document
        .querySelector(".append-2-slides", function (e) {
          e.preventDefault();
          swiper.appendSlide([
            '<div class="swiper-slide">Slide ' + ++appendNumber + "</div>",
            '<div class="swiper-slide">Slide ' + ++appendNumber + "</div>",
          ]);
        });
    
</script>

</html>